import React from 'react';
import ReactDOM from 'react-dom';

// 导入路由组件
import { BrowserRouter as Router, Route, Link, Routes,useNavigate } from 'react-router-dom'

// import { HashRouter as Router, Route, Link, Routes } from 'react-router-dom'


// ======== 声明式导航 ========
// const First = () => (<div><p>页面的内容</p></div>)
// const App = () => (
//   <Router>
//     <div>
//       <h1>React路由基础</h1>
//       {/* 指定路由入口 */}
//       <Link to="/first">页面一</Link>
//       {/* 指定路由粗口 */}
//       <Routes>
//         <Route path='/first' Component={First}></Route>
//       </Routes>

//     </div>

//   </Router>

// )

// ReactDOM.render(<App />, document.getElementById('root'))


// ======= 编程式导航 =======



class Login extends React.Component {

  gotoLoin = () => {
    this.props.history.push('/home')
  }

  render() {
    return (
      <div>
        <p>登录页面：</p>
        <button onClick={this.gotoLoin}>登录</button>
      </div>
    )
  }
}

const Home = () => {
  const navigate = useNavigate()
  const hanldleBack = ()=>{
     navigate(-1)
  }

  return (
    <div>
      <h2>我是后台首页</h2>
      <button onClick={hanldleBack}>返回登录页面按钮</button>
    </div>
  )
}

const App = () => {
  
  return (
    <Router>
      <div>
        <h1>编程式导航：</h1>
        <Link to="/login">去登录页面</Link>
        <Routes>
          <Route path='/login' Component={Login} />
          <Route exact path='/' Component={ Home } />
        </Routes>
      </div>
    </Router>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))